<template>
    <div>
        <el-dialog title="查看" :close-on-click-modal="false" :visible.sync="dialogFormVisible"  width="60%" v-el-drag-dialog>
            <div style="margin-bottom: 10px;">
                <el-button type="primary" style="margin-bottom: 10px;" @click="add('1')" disabled>新增</el-button>
                <el-table :data="addTableData" border style="width: 100%">
                    <el-table-column prop="className" label="物料名称" width="180">
                    </el-table-column>
                    <el-table-column prop="pinNum" label="物料编码">
                    </el-table-column>
                    <el-table-column prop="manufacture" label="生产厂家">
                    </el-table-column>
                    <el-table-column prop="partNumber" label="型号规格">
                    </el-table-column>
                    <el-table-column prop="class1" label="物料等级">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150" fixed="right">
                        <template #default="scope">
                            <el-button size="mini" @click="add('1', scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-bottom: 10px;">
                <el-button type="primary" style="margin-bottom: 10px;" disabled>修改</el-button>
                <el-table :data="updataTableData" border style="width: 100%">
                    <el-table-column prop="className" label="物料名称" width="180">
                    </el-table-column>
                    <el-table-column prop="pinNum" label="物料编码">
                    </el-table-column>
                    <el-table-column prop="manufacture" label="生产厂家">
                    </el-table-column>
                    <el-table-column prop="partNumber" label="型号规格">
                    </el-table-column>
                    <el-table-column prop="class1" label="物料等级">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="mini" @click="add('2', scope.$index, scope.row)">查看</el-button>
                            <el-button size="mini" @click="look(scope.row)">原始数据查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-bottom: 10px;">
                <el-button type="primary" style="margin-bottom: 10px;" disabled>删除</el-button>
                <el-table :data="deleteTableData" border style="width: 100%">
                    <el-table-column prop="className" label="物料名称" width="180">
                    </el-table-column>
                    <el-table-column prop="pinNum" label="物料编码">
                    </el-table-column>
                    <el-table-column prop="manufacture" label="生产厂家">
                    </el-table-column>
                    <el-table-column prop="partNumber" label="型号规格">
                    </el-table-column>
                    <el-table-column prop="class1" label="物料等级">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150" fixed="right">
                        <template #default="scope">
                            <el-button size="mini" @click="add('3', scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="流程名称:" prop="name">
                    <el-input v-model="ruleForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="备注信息:" prop="remark">
                    <el-input type="textarea" v-model="ruleForm.remark" disabled></el-input>
                </el-form-item>

                <el-form-item label="编制：" prop="userId0">
                    <el-select v-model="ruleForm.userId0" clearable placeholder="请选择编制" disabled>
                        <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId"
                            style="display:flex;justify-content:space-between;">
                            <span style="float: left">{{ item.userName }}</span>
                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span> -->
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核：" prop="userId0">
                    <el-select v-model="ruleForm.userId1" clearable placeholder="请选择审核" disabled>
                        <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId"
                            style="display:flex;justify-content:space-between;">
                            <span style="float: left">{{ item.userName }}</span>
                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span> -->
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="批准：" prop="userId0">
                    <el-select v-model="ruleForm.userId2" clearable placeholder="请选择批准" disabled>
                        <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId"
                            style="display:flex;justify-content:space-between;">
                            <span style="float: left">{{ item.userName }}</span>
                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span> -->
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                    <!-- <el-button size="small" type="primary" @click="dataFormSubmit()" :disabled="isDisabled">保存</el-button> -->
                </span>
            </template>
        </el-dialog>
        <addElDialog ref="addElDialog" @dataForm="success"></addElDialog>
        <treeTableLook ref="treeTableLook"></treeTableLook>
    </div>
</template>
  
<script>
import { treeClassTranslate } from "../../../utils/treeDataTranslate.js";
import addElDialog from './addLook.vue';
import treeTableLook from './treeTableLook.vue';
export default {
    emits: ["refreshDataList"],
    components: {
        addElDialog,
        treeTableLook
    },
    data() {
        return {
            urlUpdate: '',//文件上传路径
            token: {
                token: ''
            },
            dialogFormVisible: false,
            dataVisible: false,
            isDisabled: false,
            isval: false,
            addTableData: [],
            updataTableData: [],
            deleteTableData: [],
            updataTableDataOld:[],
            ruleForm: {
                name: '',
                objectFlowId: '',
                processDefinitionId: '',
                processInstanceId: '',
                remark: '',
                userId0: '',
                userId1: '',
                userId2: '',
            },
            flowUsers: [{
                name: '编制',
                orderNum: '1',
                processInstanceId: 0,
                userId: '',
                variable: 'apply'
            }, {
                name: '审核',
                orderNum: '2',
                processInstanceId: 0,
                userId: '',
                variable: 'user1'
            }, {
                name: '批准',
                orderNum: '3',
                processInstanceId: 0,
                userId: '',
                variable: 'user2'
            }],
            details: [],
            dataRule: {
                name: [
                    {
                        required: true,
                        message: "名称不能为空",
                        trigger: "blur",
                    },
                ],
                parentId: [
                    {
                        required: true,
                        message: "请选择上级项目",
                        trigger: "blur",
                    },
                ],
            },
            rules: {},
            userList: [],
            formLabelWidth: "120px",
            visible: false,
            fileList: [],//规格书
            fileList2: [],//封装
            fileList3: [],//库
            fileList4: [],//图片
            // url: process.env.VUE_APP_BASE_API,
        };
    },
    created() {
        this.urlUpdate = process.env.VUE_APP_BASE_API + '/file/uploadFileInterface'
        this.token.token = sessionStorage.getItem("token");
    },
    methods: {
        async init(id) {
            this.ruleForm.objectFlowId = id || 0;
            this.ruleForm.userId0 = this.$store.state.user.userId;
            this.ruleForm.username = this.$store.state.user.name;
            //用户下拉框
            await this.Sevice({ url: 'sys/user/select', method: 'post' }).then(res => {
                if (res && res.code == 200) {
                    this.userList = res.select;
                }
            }).catch(err => {
                console.log(err);
            })
            //获取流程id
            await this.Sevice({ url: 'sys/act/list?key=componentManage', method: 'get' }).then(res => {
                if (res && res.code == 200) {
                    this.ruleForm.processDefinitionId = res.data[0].id;
                }
            }).then(() => {
                this.dialogFormVisible = true;
                this.$nextTick(() => {
                    // this.$refs["dataForm"].resetFields();
                    this.$refs["ruleForm"].resetFields();
                });
            })
                .then(() => {
                    if (!this.ruleForm.objectFlowId) {
                        // 新增
                        // this.treeListTreeSetCurrentNode()
                    } else {
                        //获取详情
                        this.Sevice({
                            url: "/ad/object/flow/info/" + this.ruleForm.objectFlowId,
                            method: "get",
                        }).then(async (res) => {
                            console.log(res);
                            if (res.code == 200) {
                                this.ruleForm.name = res.info.name
                                this.ruleForm.objectFlowId = res.info.objectFlowId
                                this.ruleForm.processInstanceId = res.info.processInstanceId
                                this.ruleForm.remark = res.info.remark
                                this.ruleForm.userId0 = res.info.flowUsers[0].userId
                                this.ruleForm.userId1 = res.info.flowUsers[1].userId
                                this.ruleForm.userId2 = res.info.flowUsers[2].userId
                                this.flowUsers = res.info.flowUsers
                                this.details = res.info.details
                                let addTableData = []
                                let updataTableData = []
                                let deleteTableData = []
                                for (let i = 0; i < res.info.details.length; i++) {
                                    if (res.info.details[i].type == 1) {
                                        addTableData.push(res.info.details[i])
                                    }
                                    if (res.info.details[i].type == 2) {
                                        updataTableData.push(res.info.details[i])
                                    }
                                    if (res.info.details[i].type == 3) {
                                        deleteTableData.push(res.info.details[i])
                                    }
                                }
                                this.addTableData = addTableData
                                this.updataTableData = updataTableData
                                this.deleteTableData = deleteTableData
                                // this.$message.error(res.data.msg)
                            } else {
                                // this.$message.error(res.data.msg)
                            }
                        });
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        add(type, index, row) {
            this.$refs.addElDialog.init(type, index, row);
        },
        look(row){
            this.$refs.treeTableLook.init(row);
        },
        success(data) {
            console.log(data)
            if (data.data.type == 1) {
                if (data.index == null || data.index == undefined) {
                    this.addTableData.push(data.data)
                } else {
                    this.addTableData[data.index] = data.data
                }

            }
            if (data.data.type == 2) {
                if (data.index == null || data.index == undefined) {
                    this.updataTableData.push(data)
                } else {
                    this.updataTableData[data.index] = data.data
                }
            }
            if (data.data.type == 3) {
                if (data.index == null || data.index == undefined) {
                    this.deleteTableData.push(data)
                } else {
                    this.deleteTableData[data.index] = data.data
                }
            }
        },
        // 表单提交
        async dataFormSubmit() {
            this.$refs["ruleForm"].validate(async (valid) => {
                if (valid) {
                    let url = this.ruleForm.objectFlowId
                        ? "/ad/object/flow/update"
                        : "/ad/object/flow/save";
                    if (this.ruleForm.objectFlowId == "") {
                        this.isDisabled = true;
                    }
                    this.flowUsers[0].userId = this.ruleForm.userId0
                    this.flowUsers[1].userId = this.ruleForm.userId1
                    this.flowUsers[2].userId = this.ruleForm.userId2
                    await this.Sevice({
                        url: url,
                        method: "post",
                        data: {
                            objectFlowId: this.ruleForm.objectFlowId || undefined,
                            processInstanceId: this.ruleForm.processInstanceId || undefined,
                            processDefinitionId: this.ruleForm.processDefinitionId,
                            name: this.ruleForm.name,
                            remark: this.ruleForm.remark,
                            flowUsers: this.flowUsers,
                            details: [...this.addTableData, ...this.updataTableData, ...this.deleteTableData]
                        },
                    }).then((res) => {
                        if (res && res.code == 200) {
                            this.$message({
                                message: res.msg,
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.dialogFormVisible = false;
                                    this.isDisabled = false;
                                    this.$emit("getMenuList");
                                },
                            });
                        } else {
                            this.isDisabled = false;
                        }
                    });
                }
            });
        },
    },
};
</script>
  
<style scoped>
.mod-menu .menu-list__input>.el-input__inner,
.mod-menu .icon-list__input>.el-input__inner {
    cursor: pointer;
}

.mod-menu__icon-popover {
    width: 458px;
    overflow: hidden;
}

.mod-menu__icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
}

.mod-menu__icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;
}

.mod-menu__icon-list>.el-button {
    padding: 8px;
    margin: 8px 0 0 8px;
}

.mod-menu__icon-list>.el-button>span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mod-menu .icon-list__tips {
    font-size: 18px;
    text-align: center;
    color: #e6a23c;
    cursor: pointer;
}

.el-tree {
    height: 200px;
    overflow-y: auto;
}
/deep/ .el-table__fixed-right {
   height: 100% !important;
}
</style>
  